<template>
  <div class="container">
    <el-tabs v-model="activeName" @tab-click="handleClick" calss="loginBox">
      <el-tab-pane label="二维码登录" name="1" class="tabs1">
        <QrCode @getUserInfo="getUserInfo"></QrCode>
        <p>提示: 请使用网易云音乐app扫码登录</p>
      </el-tab-pane>
      <el-tab-pane label="验证码登录" name="2" class="tabs2">
        <authCode></authCode>
      </el-tab-pane>
    </el-tabs>
    <div class="register" @click="register">注册</div>
  </div>
</template>
<script>
import authCode from './components/authCode.vue'
import QrCode from './components/QrCode.vue'
export default {
  components: {
    QrCode, // 二维码登录
    authCode // 手机验证码登录
  },
  data() {
    return {
      activeName: '1'
    }
  },
  props: {
    isShowRegister: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event, '切换登录方式')
    },
    getUserInfo(info) {
      this.$emit('getUserInfo', info)
    },
    register() {
      console.log(123)
      this.$emit('update:isShowRegister', true)
    }
  }
}
</script>
<style lang="scss" scoped>
:deep(.el-tabs__item) {
  width: 200px;
  text-align: center;
}
.tabs1 {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  p {
    font-size: 16px;
  }
}

// 注册
.register {
  text-align: center;
  margin: 10px 0;
  cursor: pointer;
  font-size: 16px;
  &:hover {
    text-decoration: underline;
  }
}
// tab框大小
:deep(.el-tabs__nav) {
  height: 55px;
}
:deep(.el-tabs__item) {
  width: 200px;
  height: 50px;
  transition: all 0.5s;
}
// tab被选中后的样式
:deep(.el-tabs__item.is-active) {
  color: #ec4141;
  font-weight: 700;
  font-size: 20px;
}
// 鼠标经过字体颜色
:deep(.el-tabs__item:hover) {
  color: #ec4141;
}
// 底部滑动条颜色
:deep(.el-tabs__active-bar) {
  background-color: #ec4141;
  //   bottom: 4px;
}
</style>
